import React, { Component } from 'react';
import { Form, Button, Input, Card, message, Modal } from 'antd';
import { getCode } from '@/services/user';
@Form.create()
class TestMsg extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '',
    };
  }
  handleSendMsg = () => {
    this.props.form.validateFields(['phone'], (err, values) => {
      if (!err) {
        console.log(values);
        message.success('验证码已发送');
        this.sendMsg(values);
      }
    });
  };

  sendMsg = async number => {
    this.setState({
      code: '',
    });
    console.log(number);
    const { data } = await getCode(number);
    console.log(data.code);
    this.setState({
      code: data.code,
    });
  };
  handleLogin = () => {
    this.props.form.validateFields(['code'], (err, values) => {
      if (!err) {
        console.log(values);
        if (values.code != this.state.code) {
          message.error('验证码不正确');
        } else {
          Modal.success({
            title: '成功',
            content: '验证成功',
          });
        }
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 4 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 4 },
        sm: { span: 4 },
      },
    };
    return (
      <div>
        <Card title="短信验证码">
          <Form {...formItemLayout}>
            <Form.Item label="手机号">
              {getFieldDecorator('phone', {
                rules: [
                  {
                    required: true,
                    message: '请输入手机号',
                  },
                ],
              })(<Input placeholder="请输入手机号"></Input>)}
              <Button type="primary" onClick={() => this.handleSendMsg()}>
                获取验证码
              </Button>
            </Form.Item>

            <Form.Item label="验证码">
              {getFieldDecorator('code', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input placeholder="请输入验证码"></Input>)}
            </Form.Item>
            <Button type="primary" onClick={() => this.handleLogin()}>
              提交
            </Button>
          </Form>
        </Card>
      </div>
    );
  }
}

export default TestMsg;
